<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 楼盘列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .property-card {
            transition: transform 0.3s ease;
        }
        .property-card:hover {
            transform: translateY(-4px);
        }
        .card-shadow {
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 楼盘列表页面 -->
    <div class="page bg-white h-full overflow-y-auto pb-20">
        <!-- 顶部导航栏 -->
        <div class="sticky top-0 z-10 bg-white shadow-sm">
            <div class="flex items-center justify-between p-4">
                <a href="index.html" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <h1 class="text-lg font-bold">楼盘列表</h1>
                <button class="text-gray-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                    </svg>
                </button>
            </div>

            <div class="p-4 bg-white border-b border-gray-100">
                <div class="relative">
                    <input type="text" placeholder="搜索楼盘名称、区域" class="w-full bg-gray-100 rounded-full py-3 px-12 text-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white p-1 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="bg-white">
            <div class="flex overflow-x-auto py-3 px-4 space-x-4 text-sm text-gray-500 whitespace-nowrap scrollbar-hide border-b border-gray-100">
                <div class="flex items-center space-x-1 px-3 py-1 bg-blue-50 text-blue-600 rounded-full">
                    <span>区域</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="flex items-center space-x-1">
                    <span>价格</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="flex items-center space-x-1">
                    <span>户型</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="flex items-center space-x-1">
                    <span>特色</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
                <div class="flex items-center space-x-1">
                    <span>更多</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </div>
            </div>
        </div>
        
        <!-- 楼盘列表内容 -->
        <div class="bg-gray-50 min-h-screen p-4">
            <a href="property-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow mb-4 property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2" class="w-full h-40 object-cover" alt="楼盘图片">
                    <div class="absolute top-3 left-3">
                        <div class="px-2 py-1 text-xs bg-blue-600 text-white rounded-full inline-block">热销中</div>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-base font-bold">御景豪庭</h3>
                            <div class="text-xs text-gray-500 mt-0.5 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                </svg>
                                黄浦区 · 南京东路
                            </div>
                        </div>
                        <div class="text-blue-600 font-medium">32,000元/㎡起</div>
                    </div>
                    <div class="flex space-x-2 text-xs text-gray-400 mb-3">
                        <span>3-4居</span>
                        <span>建面 89-143㎡</span>
                    </div>
                    <div class="flex space-x-2 mb-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">精装修</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">地铁房</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">公园旁</span>
                    </div>
                    <div class="text-xs text-gray-500">2023年12月交付</div>
                </div>
            </a>
            
            <a href="property-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow mb-4 property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1448630360428-65456885c650" class="w-full h-40 object-cover" alt="楼盘图片">
                    <div class="absolute top-3 left-3">
                        <div class="px-2 py-1 text-xs bg-blue-600 text-white rounded-full inline-block">即将交付</div>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-base font-bold">翡翠江湾</h3>
                            <div class="text-xs text-gray-500 mt-0.5 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                </svg>
                                徐汇区 · 南浦大桥
                            </div>
                        </div>
                        <div class="text-blue-600 font-medium">38,000元/㎡起</div>
                    </div>
                    <div class="flex space-x-2 text-xs text-gray-400 mb-3">
                        <span>2-5居</span>
                        <span>建面 78-210㎡</span>
                    </div>
                    <div class="flex space-x-2 mb-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">江景房</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">地铁房</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">学区房</span>
                    </div>
                    <div class="text-xs text-gray-500">2023年6月交付</div>
                </div>
            </a>
            
            <a href="property-detail.html" class="block bg-white rounded-xl overflow-hidden card-shadow mb-4 property-card">
                <div class="relative">
                    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750" class="w-full h-40 object-cover" alt="楼盘图片">
                    <div class="absolute top-3 left-3">
                        <div class="px-2 py-1 text-xs bg-blue-600 text-white rounded-full inline-block">新开盘</div>
                    </div>
                </div>
                <div class="p-4">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-base font-bold">中央公园</h3>
                            <div class="text-xs text-gray-500 mt-0.5 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                </svg>
                                长宁区 · 中山公园
                            </div>
                        </div>
                        <div class="text-blue-600 font-medium">45,000元/㎡起</div>
                    </div>
                    <div class="flex space-x-2 text-xs text-gray-400 mb-3">
                        <span>3-4居</span>
                        <span>建面 110-180㎡</span>
                    </div>
                    <div class="flex space-x-2 mb-3">
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">公园地产</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">低密度</span>
                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded-full">智能家居</span>
                    </div>
                    <div class="text-xs text-gray-500">2023年9月交付</div>
                </div>
            </a>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20">
        <div class="grid grid-cols-5 h-16">
            <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="property-list.html" class="flex flex-col items-center justify-center text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span class="text-xs mt-1">楼盘列表</span>
            </a>
            <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                </svg>
                <span class="text-xs mt-1">户型列表</span>
            </a>
            <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span class="text-xs mt-1">预约看房</span>
            </a>
            <a href="#" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>
</body>
</html> 